<template>
  <div class="login-wrap">
    <div class="tophead">
      <div class="header-content clear">
        <div class="logo">
          <img src="/static/img/img-login.png">
        </div>
        <div class="header-title">
          <span>注册</span>
        </div>
      </div>
    </div>
    <div class="login-content">
      <div class="bg-login">
      </div>
      <div class="header-content">
        <div class="ms-login">
          <div class="title">小狗代发账号注册</div>
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
            <el-form-item prop="username" label="手机号码">
              <el-input v-model="ruleForm.username" placeholder="手机号码"></el-input>
            </el-form-item>
            <el-form-item prop="code" label="验证码">
              <div class="input-code">
                <el-input placeholder="请输入验证码" v-model="ruleForm.code" @keyup.enter.native="submitForm('ruleForm')"></el-input>
              </div>
              <div class="code" @click="refreshCode">
                <Sidentify :identifyCode="identifyCode"></Sidentify>
              </div>
            </el-form-item>
            <el-form-item prop="smscode" label="短信验证码">
              <div class="input-code">
                <el-input placeholder="请输入短信验证码" v-model="ruleForm.smscode" @keyup.enter.native="submitForm('ruleForm')"></el-input>
              </div>
              <div class="code">
                <el-button type="primary" @click="refreshCode">获取验证码</el-button>
              </div>
            </el-form-item>
            <el-form-item prop="password" label="登录密码">
              <el-input type="password" placeholder="登录密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
            </el-form-item>
            <el-form-item prop="password" label="确认密码">
              <el-input type="password" placeholder="确认密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
            </el-form-item>
          </el-form>
          <div class="login-btn">
            <el-button type="primary" @click="submitForm('ruleForm')" :loading="boo.isLoading">提交注册</el-button>
          </div>
        </div>
      </div>
    </div>
    <footer class="foot-container">
      <div class="foot-content fx-width">
        <div class="nav-con">
          <div class="item">
            <span>关于我们</span>
          </div>
          <div class="item" @click="goPage('/gift')">
            <span>礼品中心</span>
          </div>
          <div class="item" @click="goPage('/finance')">
            <span>充值中心</span>
          </div>
          <div class="item" @click="goPage('/api')">
            <span>开放API</span>
          </div>
          <div class="item">
            <span>平台协议</span>
          </div>
          <div class="item">
            <span>隐私政策</span>
          </div>
          <div class="item">
            <a title="客服QQ" href="tencent://message/?Menu=yes&uin=473392197&Site=80fans&Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a545b1714f9d45" target="_blank" class="dropdown-toggle text-right">
              <span>联系客服</span>
            </a>
          </div>
          <div class="item">
            <span>营业执照</span>
          </div>
        </div>
        <div class="text">
          安徽互金盈科信息科技有限公司 ALLrights reserved   &nbsp;&nbsp; |  &nbsp;&nbsp;  京ICP证 100953号 京公安网备 11010502020657 京ICP备12025643号-1 
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
import {mapState} from "vuex";//通过ES6的对象解构赋值
import Sidentify from '../common/identify'
  export default {
    data() {
      return {
        https: {
          login: this.$api.common.login
        },
        boo: {
          isLoading: false
        },
        identifyCode: '',
        ruleForm: {
          username: '',
          password: '',
          code: ''
        },
        rules: {
          username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          code: [{
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }],
          smscode: [{
            required: true,
            message: '请输入短信验证码',
            trigger: 'blur'
          }]
        }
      }
    },
    computed:{
      ...mapState({
        pctype: state=>1
      })
    },
    components: {
      Sidentify
    },
    mounted(){
      let _self = this
      _self.refreshCode()
    },
    methods: {
      submitForm(formName) {
        let _self = this
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(_self.ruleForm.code != _self.identifyCode.split(',').join('')) {
              _self.$message.error('验证码错误')
              return _self.refreshCode()
            } 
            _self.boo.isLoading = true
            let success = (res) => {
              res = res.data
              if (res.status == 200) {
                _self.$store.commit("pctype",  res.data.type)
                localStorage.setItem('ms_username', res.data.username);
                localStorage.setItem('ms_token', res.data.token);
                localStorage.setItem('ms_type', res.data.type);
                _self.$router.push(res.data.url);
              } else {
                _self.$message.error(res.message)
              }
              setTimeout(()=>{
                _self.boo.isLoading = false
              },3000)
            }
            _self.$axios.post(_self.https.login, _self.ruleForm, success, 'login')
          } else {
            return false;
          }
        });
      },
      randomNum(max, min){
        return Math.floor(Math.random() * (max - min) + min)
      },
      refreshCode(){
        this.identifyCode = ""
        this.makeCode(this.identifyCode, 4)
      },
      makeCode(emit, len){
        let arr = []
        for(let i = 0; i < len; i++){
          arr.push(this.randomNum(0, 9))
        }
        this.identifyCode = arr.toString()
      },
      goPage(item){
        let _self = this
        _self.$router.replace({path: item})
      },
    }
  }
</script>

<style scoped lang="sass"> 
.login-wrap
  position: absolute
  width: 100%
  height: 100%
  background: #333
  .header-content 
    width: 1200px
    margin: 0 auto
  .tophead
    position: absolute
    left: 0
    right: 0
    top: 0
    background: #fff
    height: 100px
    line-height: 100px
    ::after 
      content: ''
      display: block
      clear: both
    .logo 
      float: left
      width: 140px
      margin-right: 20px
      img 
        width: 130px
        height: 40px
        vertical-align: middle
    .header-title 
      padding: 0 30px
      border-left: 1px solid #dcdfe6
      display: inline-block
      line-height: 32px
      font-size: 28px
      vertical-align: middle
  .login-content
    position: relative
    height: 750px
    background: #fff
    .header-content
      position: absolute;
      top: 0
      left: 50%
      margin-left: -600px
      padding-top: 65px
  .bg-login
    margin-top: 100px
    width: 100%
    height: 540px
    background: url("/static/img/bg-login.png") no-repeat center center
    background-size: cover
    position: relative
  .ms-login 
    margin: 0 auto
    width: 798px
    // height: 320px
    padding: 40px 90px 90px
    border-radius: 4px
    background: #fff
    position: relative
    box-shadow: 1px 1px 10px 3px #dcdfe6
    &:before
      content: ""
      background: #999
      width: calc(100% - 40px)
      height: 550px
      border-radius: 30px
      display: inline-block
      position: absolute
      left: 20px
      bottom: 20px
      z-index: -1
      filter: blur(30px) brightness(0.95)
    .title
      color: rgb(51,51,51)
      text-align: center
      font-size: 15px
      font-weight: 600
      margin-bottom: 50px
    .demo-ruleForm
      width: 400px
      margin: 0 auto
    .input-code
      float: left
      width: 54%
    .code
      margin-left: 59%
      text-align: right
      cursor: pointer
      height: 38px
    /deep/ .el-button
      width: 116px
      height: 38px
  /deep/ .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item
    margin-bottom: 38px
  /deep/ .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label, .el-input--small .el-input__icon 
    line-height: 38px
  /deep/ .el-input--small .el-input__inner
    line-height: 38px
    height: 38px
  .login-btn 
    text-align: center
    width: 400px
    margin: 0 auto
  .login-btn button 
    width: 400px !important
    height: 48px !important
    font-size: 15px
    background-color: rgb(244,187,0)
    border-color: rgb(244,187,0)
  .action-btn
    cursor: pointer
    color: #999
  .foot-container
    background: #333
    color: #fff
    .foot-content
      padding: 30px 0 40px
      text-align: center
      .nav-con
        display: flex
        margin-bottom: 20px
        justify-content: center
        line-height: 12px
        .item 
          padding: 0 15px
          border-right: 1px solid #fff
          cursor: pointer
          a
            color: #fff
          &:last-child 
            border: 0
</style>
